<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/main-min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5', // 主色调：靛蓝色
                        secondary: '#6366F1', // 次要色：靛蓝色渐变
                        tertiary: '#A5B4FC', // 第三色：浅靛蓝色
                        light: '#F5F3FF', // 浅色背景
                        dark: '#1E293B', // 深色文本
                        success: '#10B981', // 成功状态
                        warning: '#F59E0B', // 警告状态
                        danger: '#EF4444', // 危险状态
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .hover-scale {
                @apply transition-transform duration-200 hover:scale-105;
            }
            .hover-lift {
                @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
            }
            .card-gradient {
                @apply bg-gradient-to-br from-white to-background;
            }
            .text-balance {
                text-wrap: balance;
            }
            .glass-effect {
                @apply bg-white/70 backdrop-blur-md;
            }
            .card-shadow {
                @apply shadow-[0_4px_20px_-5px_rgba(79,70,229,0.15)];
            }
            .btn-shadow {
                @apply shadow-[0_4px_15px_-5px_rgba(79,70,229,0.3)];
            }
        }
    </style>

    <style>
        /* 基础动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .animate-fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }

        .animate-pulse-slow {
            animation: pulse 3s ease-in-out infinite;
        }

        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: #A5B4FC;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #4F46E5;
        }

        /* 基础样式覆盖 */
        body {
            background-color: #F9FAFF;
            font-family: 'Inter', sans-serif;
        }

        .header {
            background: linear-gradient(90deg, #4F46E5 0%, #6366F1 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .dl-title {
            font-weight: 600;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
        }

        .dl-title span {
            font-size: 0.85rem;
            opacity: 0.8;
            margin-left: 5px;
        }

        .dl-log {
            color: white;
            opacity: 0.9;
            display: flex;
            align-items: center;
        }

        .dl-log a {
            color: white;
            opacity: 0.8;
            transition: opacity 0.2s ease;
            margin-left: 10px;
            display: flex;
            align-items: center;
        }

        .dl-log a:hover {
            opacity: 1;
        }

        /* 侧边栏 */
        .dl-main-nav {
            background-color: white;
            border-right: 1px solid #E0E7FF;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.02);
            width: 220px;
            float: left;
            height: calc(100vh - 50px);
            overflow-y: auto;
        }

        .dl-inform {
            padding: 10px 15px;
            background-color: #F5F3FF;
        }

        .dl-inform-title {
            font-size: 14px;
            color: #1E293B;
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        .dl-inform-icon {
            margin-right: 5px;
            color: #4F46E5;
        }

        .nav-list {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav-item {
            border-bottom: 1px solid #F5F3FF;
        }

        .nav-item.dl-selected,
        .nav-item:hover {
            background-color: #EEF2FF;
        }

        .nav-item-inner {
            color: #1E293B;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            text-decoration: none;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .nav-item.dl-selected .nav-item-inner {
            color: #4F46E5;
            font-weight: 500;
        }

        /* 内容区域 */
        .dl-tab-conten {
            background-color: transparent;
            padding: 20px;
            margin-left: 220px;
            min-height: calc(100vh - 50px);
        }

        /* 页脚 */
        .footer {
            background: linear-gradient(90deg, #4F46E5 0%, #6366F1 100%);
            color: white;
            text-align: center;
            padding: 12px 0;
            font-size: 0.9rem;
            box-shadow: 0 -4px 12px rgba(79, 70, 229, 0.1);
            clear: both;
        }

        /* 自定义菜单样式 */
        .bui-tree-item-selected {
            background-color: #EEF2FF;
            color: #4F46E5;
            font-weight: 500;
        }

        .bui-tree-item:hover {
            background-color: #F5F3FF;
        }

        /* 按钮样式 */
        .bui-button {
            background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
            border: none;
            color: white;
            border-radius: 6px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 15px -5px rgba(79, 70, 229, 0.3);
        }

        .bui-button:hover {
            background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
            transform: translateY(-1px);
            box-shadow: 0 6px 20px -5px rgba(79, 70, 229, 0.4);
        }

        .bui-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px -5px rgba(79, 70, 229, 0.4);
        }

        /* 卡片样式 */
        .data-card {
            background: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 4px 20px -5px rgba(79, 70, 229, 0.15);
            border: 1px solid #E0E7FF;
            transition: all 0.3s ease;
        }

        .data-card:hover {
            box-shadow: 0 8px 30px -5px rgba(79, 70, 229, 0.2);
            transform: translateY(-2px);
        }

        .card-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #EEF2FF;
            color: #4F46E5;
            margin-bottom: 10px;
        }

        /* 响应式布局 */
        @media (max-width: 768px) {
            .dl-main-nav {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid #E0E7FF;
                height: auto;
            }

            .dl-tab-conten {
                margin-left: 0;
                padding: 15px;
            }

            .header {
                flex-direction: column;
                align-items: flex-start;
            }

            .dl-log {
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>

<div class="header">
    <div class="dl-title">
        <div class="h-8 w-8 rounded-lg bg-white/20 flex items-center justify-center mr-2">
            <i class="fa fa-book text-white text-xl"></i>
        </div>
        图书管理系统
        <span>Library Management System</span>
    </div>
    <div class="dl-log">
        <div class="flex items-center">
            <i class="fa fa-user-circle-o mr-2"></i>
            <span class="dl-log-user" th:text="${session.sysadmin.username}"></span>
        </div>
        <a href="/sysadmin/logout" title="退出系统" class="dl-log-quit hover:underline transition-all">
            <i class="fa fa-sign-out mr-1"></i>退出
        </a>
    </div>
</div>

<div class="content">
    <div class="dl-main-nav">
        <div class="dl-inform">
            <div class="dl-inform-title flex items-center">
                <s class="dl-inform-icon dl-up text-primary"></s>
                <span class="text-sm font-medium text-dark/70">系统导航</span>
            </div>
        </div>
        <ul id="J_Nav" class="nav-list">
            <li class="nav-item dl-selected">
                <div class="nav-item-inner nav-home flex items-center gap-3">
                    <i class="fa fa-home"></i>
                    <span>系统管理</span>
                </div>
            </li>
        </ul>
    </div>

    <div id="J_NavContent" class="dl-tab-conten">
        <!-- 页面内容将在这里动态加载 -->
        <div class="animate-fade-in">
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">系统管理</h2>
                <p class="text-dark/60">欢迎回来，<span th:text="${session.sysadmin.username}"></span>！这里是图书管理系统的管理控制台。</p>
            </div>

            <!-- 快速访问卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div class="data-card hover-lift rounded-xl">
                    <div class="card-icon mb-3">
                        <i class="fa fa-users text-xl"></i>
                    </div>
                    <h3 class="font-semibold text-dark">用户管理</h3>
                    <p class="text-dark/60 text-sm mt-1">管理系统用户和权限</p>
                    <a href="/sysadmin/userList" class="mt-3 inline-block text-primary hover:underline">
                        进入 <i class="fa fa-arrow-right ml-1"></i>
                    </a>
                </div>

                <div class="data-card hover-lift rounded-xl">
                    <div class="card-icon mb-3">
                        <i class="fa fa-book text-xl"></i>
                    </div>
                    <h3 class="font-semibold text-dark">书籍管理</h3>
                    <p class="text-dark/60 text-sm mt-1">管理书籍信息和分类</p>
                    <a href="/sysadmin/bookList" class="mt-3 inline-block text-primary hover:underline">
                        进入 <i class="fa fa-arrow-right ml-1"></i>
                    </a>
                </div>

                <div class="data-card hover-lift rounded-xl">
                    <div class="card-icon mb-3">
                        <i class="fa fa-tags text-xl"></i>
                    </div>
                    <h3 class="font-semibold text-dark">类别管理</h3>
                    <p class="text-dark/60 text-sm mt-1">管理书籍分类和标签</p>
                    <a href="/sysadmin/sortList" class="mt-3 inline-block text-primary hover:underline">
                        进入 <i class="fa fa-arrow-right ml-1"></i>
                    </a>
                </div>
            </div>

            <!-- 系统概览 -->
            <div class="bg-white rounded-12 shadow-sm border border-E0E7FF p-5">
                <h3 class="font-semibold text-dark mb-4">系统概览</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="p-3 bg-light rounded-lg">
                        <h4 class="font-medium text-dark/80 mb-2">用户统计</h4>
                        <div class="flex items-center justify-between">
                            <span class="text-dark">总用户数:</span>
                            <span class="font-semibold text-primary">2,548</span>
                        </div>
                        <div class="flex items-center justify-between mt-2">
                            <span class="text-dark">活跃用户:</span>
                            <span class="font-semibold text-primary">1,283</span>
                        </div>
                        <div class="flex items-center justify-between mt-2">
                            <span class="text-dark">今日新增:</span>
                            <span class="font-semibold text-green-500">+12</span>
                        </div>
                    </div>

                    <div class="p-3 bg-light rounded-lg">
                        <h4 class="font-medium text-dark/80 mb-2">书籍统计</h4>
                        <div class="flex items-center justify-between">
                            <span class="text-dark">总书籍数:</span>
                            <span class="font-semibold text-primary">15,672</span>
                        </div>
                        <div class="flex items-center justify-between mt-2">
                            <span class="text-dark">可借阅:</span>
                            <span class="font-semibold text-primary">12,345</span>
                        </div>
                        <div class="flex items-center justify-between mt-2">
                            <span class="text-dark">今日借出:</span>
                            <span class="font-semibold text-green-500">+48</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <p>© 2025 图书管理系统 | 版权所有</p>
</div>

<script type="text/javascript" src="/assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="/assets/js/bui-min.js"></script>
<script type="text/javascript" src="/assets/js/common/main-min.js"></script>
<script type="text/javascript" src="/assets/js/config-min.js"></script>
<script>
    BUI.use('common/main', function() {
        var config = [{
            id: '1',
            menu: [{
                text: '系统管理',
                items: [
                    {id: '3', text: '用户管理', href: '/sysadmin/userList'},
                    {id: '12', text: '书籍管理', href: '/sysadmin/bookList'},
                    {id: '13', text: '类别管理', href: '/sysadmin/sortList'},
                ]
            }]
        }];

        new PageUtil.MainPage({
            modulesConfig: config
        });
    });
</script>
</body>
</html>